<template>
	<!-- 分散式房源 -->
	<view class="roomListBox">
		<view class="list row" v-for="(item,i) in props.roomsList" :key="item.id" @click="goDetail(item.roomHouseId)">
			<view class="pic">
				<image class="img" :src="$filters.oosImgZip(item.picUrl)" mode="aspectFill"></image>
			</view>
			<view class="mess">
				<view class="name line1">{{item.name}}</view>
				<view class="addr line1">{{item.isWhole?'整租':'合租'}} {{item.roomHouseTypeName}} {{item.space}}㎡</view>
				<view class="tel line1">{{item.address}}</view>
				<view class="floor">{{item.inFloorNum}}/{{item.floorNum}}层  {{item.toWard}}</view>
				<view class="price"><text class="yellow">{{item.price || 0}}</text>/月起</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const props = defineProps({
	roomsList:{
		type: Array,
		default: () => []
	}
})

const goDetail = (roomHouseId)=>{
	uni.navigateTo({
		url:`/pages/searchRoom/disperseHouseDetail?roomHouseId=${roomHouseId}`
	})
}
</script>

<style lang="scss" scoped>
.roomListBox{
	padding: 0 32rpx 32rpx;
	background: #fff;
	.list{
		border-bottom: 2rpx solid #F5F5F5;
		padding: 36rpx 0;
		.pic{
			width: 242rpx;
			height: 208rpx;
			border-radius: 8rpx;
			overflow: hidden; 
			margin-right: 28rpx;
		}
		.mess{
			max-width: 400rpx;
			.name{
				font-size: 30rpx;
				color: #000;
				line-height: 36rpx;
				font-weight: bold;
			}
			.addr{
				font-size: 24rpx;
				line-height: 30rpx;
				margin: 12rpx 0 6rpx;
				color: #999;
				.icon-addr{
					display: inline-block;
					width: 28rpx;
					height: 28rpx;
					background: url('#{$imgUrl}/index/room-addr.png') no-repeat;
					background-size: 100% 100%;
					vertical-align: middle;
					margin: -4rpx 8rpx 0 0;
				}
			}
			.tel{
				font-size: 24rpx;
				line-height: 30rpx;
				color: #999;
				margin: 0 0 6rpx;
				.icon-tel{
					display: inline-block;
					width: 28rpx;
					height: 28rpx;
					background: url('#{$imgUrl}/index/room-tel.png') no-repeat;
					background-size: 100% 100%;
					vertical-align: middle;
					margin: -4rpx 8rpx 0 0;
				}
			}
			.floor{
				font-size: 24rpx;
				line-height: 30rpx;
				color: #999;
			}
			.price{
				margin: 12rpx 0 0;
				color: #4D4D4D;
				font-size: 20rpx;
				line-height: 40rpx;
				.yellow{
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>